<template>
  <div class="song-lyric">
    <h1 class="lyric-title">歌词</h1>
    <!-- 有歌词 -->
    <ul class="has-lyric" v-if="lyr.length" key="index">
      <li v-for="(item,index) in lyr" v-bind:key="index">
        {{item[1]}}
      </li>
    </ul>
    <!-- 没有歌词 -->
    <div v-else class="no-lyric" key="no-lyric">
      <span>暂无歌词</span>
    </div>
  </div>
</template>
<script>
import {mixin} from '../mixins';
import {mapGetters} from 'vuex';

export default {
  name: 'Lyric',
  mixins: [mixin],
  data(){
    return {
      lyr: []         //当前歌曲的歌词
    }
  },
  computed: {
    ...mapGetters([
      'curTime',      //当前歌曲播放到的位置
      'id',           //当前播放的歌曲id
      'lyric',        //歌词
      'listIndex',    //当前歌曲在歌单中的位置
      'listOfSongs',  //当前歌单列表
    ])
  },
  created(){
    this.lyr = this.lyric;
  },
  watch:{
    id:function(){
      this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
    },
    curTime: function(){
      if(this.lyr.length>0){
        for(let i=0;i<this.lyr.length;i++){
          if(this.curTime>=this.lyr[i][0]){
            for(let j=0;j<this.lyr.length;j++){
              document.querySelectorAll('.has-lyric li')[j].style.color = '#000';
              document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';
            }
            if(i>=0){
              document.querySelectorAll('.has-lyric li')[i].style.color = '#FFC0CB';
              document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';
            }
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.song-lyric {
  margin: auto;
  margin-top:90px;
  width: 700px;
  background-color: white;
  border-radius: 12px;
  padding: 0 20px 50px 20px;
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont,
  Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
  Helvetica Neue, Helvetica, Arial, sans-serif;
}
.lyric-title {
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid black;
}
.has-lyric {
  font-size: 18px;
  padding: 30px 0;
  width: 100%;
  min-height: 170px;
  text-align: center;
}
.has-lyric li{
  width: 100%;
  height: 40px;
  line-height: 40px;
  list-style: none;
}
.no-lyric{
  margin: 200px 0;
  width: 100%;
  text-align: center;
}
.no-lyric span{
  font-size: 18px;
  text-align: center;
}

.lyric-fade-enter,
.lyric-fade-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
.lyric-fade-enter-active,
.lyric-fade-leave-active {
  transition: all 0.3s ease;
}

</style>
